<template>
  <div class="app-container">
    <el-card>
      <el-form ref="searchForm" :model="searchForm" size="mini" :inline="true">
        <el-form-item label="手机号/账号Id">
          <el-input v-model="searchForm.account" placeholder="请输入手机号/账号Id" maxlength="11" clearable></el-input>
        </el-form-item>
        <el-form-item label="昵称搜索">
          <el-input v-model="searchForm.nickname" placeholder="请输入昵称" maxlength="11" clearable></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="startTime">
          <el-date-picker style="width: 200px" v-model="searchForm.beginTime" align="right" type="date"
            placeholder="选择开始日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
        </el-form-item>
        <el-form-item>-</el-form-item>
        <el-form-item>
          <el-date-picker v-model="searchForm.endTime" align="right" type="date" placeholder="选择结束日期"
            :picker-options="pickerOptions" value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="回复状态">
          <el-select clearable v-model="searchForm.replyStatus" placeholder="请选择回复状态">
            <el-option label="未回复" value="0"></el-option>
            <el-option label="已回复" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="重要状态">
          <el-select clearable v-model="searchForm.urgencyType" placeholder="请选择回复状态">
            <el-option v-for="item in urgencyTypeList" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-refresh" @click="resetList">重置</el-button>
          <el-button icon="el-icon-search" type="primary" @click="searchList">查询</el-button>
          <el-button icon="el-icon-download" type="primary" @click="exportPdf">导出</el-button>
        </el-form-item>
      </el-form>
      <el-button style="margin: 0 10px 10px 10px" size="mini" icon="el-icon-delete" @click="deleteMany()"
        v-btnpermission="$btnPer.feedbackBtnrules.batchDeleteFeedback">批量删除</el-button>
      <el-table :data="tableData.data" @selection-change="selectTableList" size="mini" v-loading="listLoading" border>
        <el-table-column align="center" type="selection" width="55"></el-table-column>
        <el-table-column align="center" label="账号Id" width="100" prop="socialId">
        </el-table-column>
        <el-table-column align="center" label="头像" width="100">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px" :src="scope.row.memberIcon"
              :preview-src-list="[scope.row.memberIcon]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" label="用户昵称" width="200" prop="memberNickname">
        </el-table-column>

        <el-table-column align="center" label="反馈内容" width="550">
          <template slot-scope="scope">
            <el-tooltip class="tooltip-cl" effect="dark" placement="top">
              <div style="max-width: 500px; line-height: 20px" slot="content">
                {{ scope.row.content }}
              </div>
              <div class="feedback-content">{{ scope.row.content }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" label="回复内容" width="300">
          <template slot-scope="scope">
            <el-tooltip class="tooltip-cl" effect="dark" placement="top">
              <div style="max-width: 300px; line-height: 20px" slot="content">
                {{ scope.row.merchantReplyContent }}
              </div>
              <div class="feedback-content">
                {{
                  scope.row.merchantReplyContent
                    ? scope.row.merchantReplyContent
                    : ""
                }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column align="center" label="反馈截图" width="200px">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px; margin-right: 5px;" v-for="item in scope.row.pics.split(',')"
              :key="item" :src="item" :preview-src-list="scope.row.pics.split(',')">
            </el-image>

          </template>
        </el-table-column>


        <el-table-column align="center" label="手机号" width="180" prop="phone"></el-table-column>
        <el-table-column align="center" label="回复状态" width="180" prop="status">
          <template slot-scope="scope">
            <el-tag size="mini" :type="scope.row.replyStatus == 0 ? 'info' : 'success'" disable-transitions>{{
              scope.row.replyStatus == 0 ? "未回复" : "已回复" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="设备品牌" width="220px" prop="deviceBrand">
        </el-table-column>

        <el-table-column align="center" label="设备型号" width="220px" prop="deviceModel">
        </el-table-column>

        <el-table-column align="center" label="操作系统及版本" width="220px" prop="deviceSystem">
        </el-table-column>
        <el-table-column align="center" label="	客户端平台" width="220px" prop="devicePlatform">
        </el-table-column>
        <el-table-column align="center" label="app版本" width="220px" prop="appVersion">
        </el-table-column>
        <el-table-column align="center" label="创建时间" width="220px" prop="createTime">
        </el-table-column>
        <el-table-column align="center" label="账号注册时间" prop="registerTime" width="220px">

        </el-table-column>

        <el-table-column align="center" label="重要程度" width="220px">
          <template slot-scope="scope">
            {{ scope.row.urgencyTypeName ? scope.row.urgencyTypeName : '-' }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" width="150px" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="editUrgencyType(scope.row)" size="small">设置重要程度</el-button>
            <el-button type="text" @click="detail(scope.row)" size="small">详情</el-button>

            <el-button v-btnpermission="$btnPer.feedbackBtnrules.replyFeedback" v-if="scope.row.replyStatus == 0"
              type="text" @click="referMsg(scope.row)" size="small">回复</el-button>
            <el-button v-btnpermission="$btnPer.feedbackBtnrules.deleteFeedback" type="text"
              @click="deleteRefer(scope.row)" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pageRight" background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]" :current-page="searchForm.pageNum" :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
      </el-pagination>
    </el-card>
    <FeedbackDetail ref="FeedbackDetailREf"></FeedbackDetail>
    <editUrgencyTypeLog @getList="getList" :urgencyTypeList="urgencyTypeList" ref="editUrgencyTypeLogRef">
    </editUrgencyTypeLog>
  </div>
</template>

<script>
import {
  getFeedbackList,
  returnFeedback,
  deleteFeddback,
  deleteManyFeedback
} from "@/api/member";
import editUrgencyTypeLog from './components/editUrgencyTypeLog.vue'
import FeedbackDetail from "./components/detail";
import { authDate } from "@/utils/date";
import { downloadFeedback } from "@/utils/downloadFile";
export default {
  components: {
    FeedbackDetail,
    editUrgencyTypeLog
  },
  data() {
    return {
      searchForm: {
        urgencyType: null,
        replyStatus: null,
        beginTime: "",
        endTime: "",
        account: "",
        pageNum: 1,
        pageSize: 10,
        nickname: ''
      },
      listLoading: false,
      tableData: {
        data: [],
        total: 0
      },
      urgencyTypeList: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一年前",
            onClick(picker) {
              const date = new Date();
              date.setFullYear(date.getFullYear() - 1);
              picker.$emit("pick", date);
            }
          },
          {
            text: "两年前",
            onClick(picker) {
              const date = new Date();
              date.setFullYear(date.getFullYear() - 2);
              picker.$emit("pick", date);
            }
          },
          {
            text: "三年前",
            onClick(picker) {
              const date = new Date();
              date.setFullYear(date.getFullYear() - 3);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      deleteList: []
    };
  },
  async created() {
    this.urgencyTypeList = await this.$getDictData("replay_urgency");
    console.log(this.urgencyTypeList);
    this.getList();
  },
  methods: {
    exportPdf() {
      downloadFeedback(this.searchForm)
    },
    editUrgencyType(v) {
      this.$refs.editUrgencyTypeLogRef.editUrgencyType(v);
    },
    detail(v) {
      this.$refs.FeedbackDetailREf.openlog(v);
    },
    deleteRefer(val) {
      let that = this;
      this.$confirm("是否确认删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteFeddback(val.id).then(res => {
          if (res.code == 200) {
            that.$message({
              type: "success",
              message: "删除成功!"
            });
            setTimeout(() => {
              that.getList();
            }, 500);
          }
        });
      });
    },
    referMsg(v) {
      let that = this;
      this.$prompt("回复建议", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputErrorMessage: "请输入反馈建议",
        inputType: "textarea",
        inputValue: v.merchantReplyContent,
        inputPlaceholder: "请输入反馈建议",
        inputValidator: value => {
          if (!value) return "输入不能为空";
        }
      })
        .then(({ value }) => {
          console.log(value, v.id);
          returnFeedback({ merchantReplyContent: value, id: v.id }).then(
            res => {
              if (res.code == 200) {
                that.$message.success("回复成功");
                that.getList();
              }
            }
          );
        })
        .catch(() => {
          this.$message.info("取消输入");
        });
    },
    deleteMany() {
      let that = this;
      if (this.deleteList.length == 0) {
        this.$message({
          message: "请先选择要删除的项",
          type: "warning"
        });
      } else {
        this.$confirm("是否确认删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          deleteManyFeedback(this.deleteList.join(",")).then(res => {
            if (res.code == 200) {
              that.$message({
                type: "success",
                message: "删除成功!"
              });
              setTimeout(() => {
                that.getList();
              }, 500);
            }
          });
        });
      }
    },
    selectTableList(val) {
      this.deleteList = val.map(v => v.id);
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },
    searchList() {
      this.searchForm.pageNum = 1;
      this.searchForm.pageSize = 10;
      if (this.searchForm.phone) {
        if (!/^1[3456789]\d{9}$/.test(this.searchForm.phone)) {
          return this.$message.warning("请输入正确的手机号");
        }
      }
      authDate(this.searchForm.beginTime, this.searchForm.endTime, v => {
        if (!v.type) {
          return this.$message.warning(v.msg);
        } else {
          // console.log(this.searchForm);
          this.getList();
        }
      });
    },
    resetList() {
      this.searchForm = {
        phone: "",
        pageNum: 1,
        pageSize: 10
      };
      this.getList();
    },
    getList() {
      this.detailLoading = true;
      getFeedbackList(this.searchForm)
        .then(res => {
          res.data.list.forEach(item => {
            if (item.urgencyType) {
              item.urgencyTypeName = this.urgencyTypeList.find(
                v => v.value === item.urgencyType
              ).label;
            }
          });
          this.tableData.data = res.data.list;
          this.tableData.total = res.data.total;





          this.detailLoading = false;
        })
        .finally(() => {
          this.detailLoading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  position: relative;
}

.feedback-content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
